<template>
  <section>
    <el-row>
      <el-card>
        <el-tabs type="border-card">
          <el-tab-pane label="班级">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="addClass">添加班级</el-button>
            </el-row>
            <el-table style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
              <el-table-column type="index" :index="indexMethod" sortable label="序号">
              </el-table-column>
              <el-table-column prop="name" label="班级名称" sortable>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="medium" @click="Check">查 看</el-button>
                  <el-button size="medium" @click="Edit">编 辑</el-button>
                  <el-button size="medium" type="danger" @click="Delete">删 除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="专业">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="addMajor">添加专业</el-button>
            </el-row>
            <el-table style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
              <el-table-column type="index" :index="indexMethod" sortable label="序号">
              </el-table-column>
              <el-table-column prop="name" label="专业名称" sortable>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="medium" @click="Edit">编 辑</el-button>
                  <el-button size="medium" type="danger" @click="Delete">删 除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="逻辑班">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="addLogicClass">添加逻辑班</el-button>
            </el-row>
            <el-table style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
              <el-table-column type="index" :index="indexMethod" sortable label="序号">
              </el-table-column>
              <el-table-column prop="name" label="逻辑班号" sortable>
              </el-table-column>
              <el-table-column prop="address" label="课程名称" :formatter="formatter">
              </el-table-column>
              <el-table-column prop="address" label="任课老师" :formatter="formatter">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="medium" @click="Check">查 看</el-button>
                  <el-button size="medium" @click="Edit">编 辑</el-button>
                  <el-button size="medium" type="danger" @click="Delete">删 除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
    <!-- 添加班级页面 -->
    <el-dialog title="添加班级页面" :visible.sync="ClassForm" width="80%" :before-close="handleClose">
      <el-row>
        <el-card>
          <el-form label-width="100px">
            <el-form-item label="班级名称">
              <el-input type="text" placeholder="请输出班级名称"></el-input>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-button type="primary">保 存</el-button>
          </el-row>
        </el-card>
      </el-row>
    </el-dialog>
    <!-- 添加专业页面 -->
    <el-dialog title="添加专业页面" :visible.sync="MajorForm" width="80%" :before-close="handleClose">
      <el-row>
        <el-card>
          <el-form label-width="100px">
            <el-form-item label="专业名称">
              <el-input type="text" placeholder="请输出专业名称"></el-input>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-button type="primary">保 存</el-button>
          </el-row>
        </el-card>
      </el-row>
    </el-dialog>
    <!-- 添加逻辑班页面 -->
    <el-dialog title="添加逻辑班页面" :visible.sync="LogicClassForm" width="80%" :before-close="handleClose">
      <el-row>
        <el-card>
          <el-form label-width="100px">
            <el-form-item label="课程">
              <el-select placeholder="请选择课程">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="逻辑班号">
              <el-input type="text" placeholder="请输入逻辑班号"></el-input>
            </el-form-item>
            <el-form-item label="任课老师">
              <el-select placeholder="请选择任课老师">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="类型">
              <el-select placeholder="请选择类型">
                <el-option></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-button type="primary">保 存</el-button>
          </el-row>
        </el-card>
      </el-row>
    </el-dialog>
  </section>
</template>
<script>
export default {
    data() {
        return {
            ClassForm: false,
            LogicClassForm: false,
            MajorForm: false
        };
    },
    methods: {
        indexMethod(index) {
            return index + 1;
        },
        addClass() {
            this.ClassForm = true;
        },
        addLogicClass() {
            this.LogicClassForm = true;
        },
        addMajor() {
            this.MajorForm = true;
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        }
    }
};
</script>
